<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试</h2>
      <button @click="back">back</button>
      <button @click="forWard">forWard</button>
      <button @click="go">go</button>
  
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
    <!-- 声明式导航链接务必要有to属性
       router-link拥有一个属性:active-class:可是设置高亮外观，点击那个声明式导航就会有这个类名
     -->
      <router-link class="list-group-item" to="/about" active-class="cur">About</router-link>
      <router-link class="list-group-item" to="/home" active-class="cur">Home</router-link>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
         <!-- 展示区域:要么展示home|展示about  二选择一个 -->
         <!--第六步:需要设置路由组件的出口地方-->
        <!-- router-view:它是一个全局组件，vue-router插件提供的全局组件,它的作用是设置路由组件出口的地方
            老百姓说的话:路由组件到底在哪里显示 
          -->
        <keep-alive :include="['About']">
          <!-- 路由组件:home|about路由组件会被(缓存) -->
          <!-- include:包含，可以'指名道姓'缓存哪一个路由组件 -->
          <router-view></router-view>
        </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  mounted() {
  },
  methods: {
      //返回
      back(){
        //VC:$router
        this.$router.back();//往回退一步
        // console.log(this.$router);
      },
      //前进
      forWard(){
        this.$router.forward()
      },
      //返回与前进
      go(){
         this.$router.go(1);
      } 
  },
};
</script>

<style>
  /*
   由于A标签自身有 list-group-item  使用到bootstrap样式
   又给A标签cur,出现样式权重问题 ----样式权重变为最高即可
  */
  .cur{
    background: yellowgreen !important;
  }
</style>
